<!-- D:\project\en_haiou\enhaiou-PC\static\images\drug -->
<template>
  <div class="pagebody">
    <!-- <pageHeader :pageindex="1"></pageHeader>
    <bannercom :type="7"></bannercom> -->
    <HomeHeadeh />
    <div class="container">
      <div class="breadnav">
        <nuxt-link to="/">Homepage</nuxt-link><img src="@/static/images/drug/breadright.png"
             alt=""><nuxt-link :to="{ name: 'druglist', params: { page: 1 } }">Drugs</nuxt-link><img src="@/static/images/drug/breadright.png"
             alt="">{{ drug.name }}
      </div>

    </div>
    <div class="container">
      <div class="details">
        <div class="leftbox">
          <h1>{{ webpagetitle }}</h1>
          <div class="bgfff mb16">
            <div class="othernavcontent"
                 v-html="drug.editionPrice"></div>
            <div class="othernavcontent"
                 v-html="content">
            </div>
            <div class="news_div"
                 v-for="(item, index) in newsTypelist"
                 :key="index">
              <nuxt-link target="_blank"
                         :to="'/newsDetails/' + item.id + '.html'">
                <div class="title">{{ item.name }}</div>
              </nuxt-link>
              <div class="newscon"
                   v-html="subfont(item)">
              </div>
            </div>
            <drugType :drug=drug></drugType>
            <drugCard style="margin-top:42px;"
                      :drug=drug></drugCard>
            <understand></understand>
            <medicinePirce :name="'Related articles'"
                           :newslist="newslist"></medicinePirce>
            <div class="pager bgfff align-center justify-end mt24">
              <div class="block">
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               background
                               :current-page="page"
                               :page-sizes="[10, 20, 30, 40]"
                               :page-size="6"
                               layout="total, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <right></right>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>


import understand from '@/components/seagull/understand'
import right from '@/components/right/right'
import drugCard from '@/components/drugs/drugCard'
import medicinePirce from '@/components/drugs/medicinePirce'
import drugType from '@/components/drugs/drugType'

import { getDrugById, getNewsList } from '@/api/api'

export default {
  name: 'drugDetail',
  components: {
    understand,
    right,
    medicinePirce,
    drugType,
    drugCard
  },
  async asyncData ({ app, params, error, route }) {
    let path = route.fullPath.split("/")[1];
    let drugid = params.id
    let page = params.page
    let drugresponse = await app.$axios.get(getDrugById + drugid)
    let drug = drugresponse.data
    if (drug == null) {
      error({ statusCode: 404 })
      return
    }
    let content = "";
    let webpagetitle = "";
    let webpagedescription = "";
    let webpagekeywords = "";
    let type = "";
    let nofindtitle = "";
    let obj = ""
    if ("information" == path) {
      nofindtitle = drug.name + ",Indications,Efficacy-Seagull Pharmacy";
      type = '01';
      obj = drug.drugOtherList.filter(item => item.type === '01');
    } else if ("indications" == path) {
      nofindtitle = drug.name + ",Indications,Efficacy-Seagull Pharmacy";
      type = '02';
      obj = drug.drugOtherList.filter(item => item.type === '02');
    } else if ("therapeuticEffect" == path) {
      nofindtitle = drug.name + ",Usage,Administration-Seagull Pharmacy";
      type = '03';
      obj = drug.drugOtherList.filter(item => item.type === '03');
    } else if ("dosage" == path) {
      nofindtitle = drug.name + ",Price,Purchase Channel-Seagull Pharmacy";
      type = '04';
      obj = drug.drugOtherList.filter(item => item.type === '04');
    } else if ("precautions" == path) {
      nofindtitle = drug.name + ",Effects,Efficacy-Seagull Pharmacy";
      type = '05';
      obj = drug.drugOtherList.filter(item => item.type === '05');

    } else if ("adverseReactions" == path) {
      nofindtitle = drug.name + ",precautions-Seagull Pharmacy";
      type = '06';
      obj = drug.drugOtherList.filter(item => item.type === '06');
    }
    console.log("obj", obj)
    if (obj.length > 0) {
      content = obj[0].content;
      webpagetitle = obj[0].webpagetitle ? obj[0].webpagetitle : drug.title;
      webpagedescription = obj[0].webpagekeywords ? obj[0].webpagekeywords : drug.description;
      webpagekeywords = obj[0].webpagedescription ? obj[0].webpagedescription : drug.keywords;
    }

    //获取药品类型下相关的文章
    let data = {
      drugId: drugid,
      type: type,
      pageNum: 1,
      pageSize: 3,
      orderByColumn: 'updateTime',
      isAsc: 'desc',
      flag: 'false',
      state: "1",
      label: "3"
    }
    const newsTypelist = await app.$axios.post(getNewsList, data)

    //获取药品下相关的文章
    let param = {
      drugId: drugid,
      pageNum: page,
      type: type,
      pageSize: 6,
      orderByColumn: 'updateTime',
      isAsc: 'desc',
      state: "1",
    }
    const newslist = await app.$axios.post(getNewsList, param)



    return {
      webpagetitle: webpagetitle,
      webpagedescription: webpagedescription,
      webpagekeywords: webpagekeywords,
      drugid: drugid,
      drug: drug,
      content: content,
      newslist: newslist.rows,
      total: newslist.total,
      newsTypelist: newsTypelist.rows,
      path: path,
      page: page

    }
  },
  head () {
    return {
      // tdk设置
      title: this.webpagetitle,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.webpagedescription,
        },
        {
          hid: "keywords",
          name: "keywords",
          content: this.webpagekeywords,
        },
      ],
    };
  },
  data () {
    return {
      isimg: 0,
      translateX: 0,
      imgnum: 0,
      imgindex: 0,
      preOpacity: 0.5,
      nextOpacity: 0.5,
      callbacktel: "",
      isnav: 0,
      othernavcontent: "",
      page: 1,
      total: 0,
      pageSize: 10,
    }
  },
  mounted () {

  },
  methods: {
    // 分页
    updateispage () {
      let Numpage = Number(this.newslist.page)
      this.ispage = Numpage

    },
    handleSizeChange (val) {
      //(`每页 ${val} 条`);
      this.pageSize = val
      // this.getNewsList()
    },

    handleCurrentChange (val) {
      this.$router.push({ target: '_blank', name: this.path, params: { id: this.drugid, page: val } })
      //(`当前页: ${val}`);
    },
    subfont (item) {
      const detailsHref = '/newsDetails/' + item.id + '.html'
      if (null != item.content) {
        if (item.content.length > 200) {
          return item.content.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim().slice(0, 200) + '...' + '<a rel="nofollow" href="' + detailsHref + '"></a>'
        } else {
          return item.content + '<a rel="nofollow" href="' + detailsHref + '"></a>'
        }
      } else {
        return ''

      }
    }

  },
}

</script>

<style lang="scss" scoped>
.pagebody {
  background: #ffffff;

  .Tipsbox {
    font-size: 14px;
    color: #666;
    padding-top: 16px;
  }

  .breadnav {
    height: 30px;
    line-height: 30px;
    margin-top: 16px;
    font-size: 12px;
    color: #7a8599;

    img {
      width: 6px;
      margin: 0 10px;
    }
  }

  .details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 94px;
    margin-top: 16px;

    .leftbox {
      width: 848px;
      h1 {
        text-align: center;
        color: #002162;
      }

      .detailsnav {
        height: 58px;
        border-bottom: 1px solid #dde8eb;
        display: flex;
        align-items: center;
        padding: 0 24px;
        background: linear-gradient(
          180deg,
          rgba(229, 241, 255, 0.76) 0%,
          rgba(229, 241, 255, 0.05) 100%
        );

        li {
          height: 58px;
          line-height: 58px;
          margin-right: 24px;
          font-size: 18px;
          color: #293347;
          cursor: pointer;
        }

        .active {
          font-weight: bold;
          color: #003399;
          border-bottom: 2px solid #003399;
        }
      }

      .othernavcontent {
        padding: 0px 24px;
        box-sizing: border-box;
        background: #fff;
        text-align: justify;
        color: #293347;
        font-size: 18px;
        line-height: 32px;
        margin-top: 16px;
        text-indent: 36px;

        ::v-deep h2 {
          color: #002162;
          font-weight: bold;
          margin-top: 24px;
          margin-bottom: 24px;
          text-indent: 36px;
        }

        ::v-deep h3 {
          color: #293347;
          font-weight: bold;
          margin-top: 16px;
          font-size: 20px;
          margin-bottom: 16px;
          text-indent: 36px;
        }

        ::v-deep h4 {
          color: #293347;
          font-weight: bold;
          margin-top: 16px;
          font-size: 18px;
          margin-bottom: 16px;
          text-indent: 36px;
        }

        ::v-deep p {
          text-align: justify;
          color: #293347;
          font-size: 18px;
          line-height: 32px;
          margin-top: 16px;
          margin-bottom: 16px;
          text-indent: 36px;
        }

        ::v-deep a {
          font-size: 18px;
          color: #003399;
        }
      }

      .news_div {
        background: #eef6ff;
        padding: 16px 16px 32px;
        margin-bottom: 16px;

        .title {
          height: 32px;
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 20px;
          color: #003399;
          line-height: 32px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .newscon {
          width: 792px;
          height: 64px;
          font-family: Arial, Arial;
          font-weight: 400;
          font-size: 18px;
          color: #293347;
          line-height: 32px;
          text-align: justified;
          font-style: normal;
          text-transform: none;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          white-space: normal;
          -webkit-line-clamp: 2;
        }
      }
    }

    .rightbox {
      width: 333px;
    }
  }
}
</style>